<template>
    <div class="theme flex text-center fd_c color-white" :style="{ background: `url(${$get(img)}) no-repeat center/cover`, height: height }">
        <p class="title fz44">{{ title }}</p>
        <div class="bottom-des fz22">
            <p class="des1">{{ des1 }}</p>
            <p class="des2">{{ des2 }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'CqTheme',
  props: {
    title: {
      type: String,
      default: ''
    },
    img: {
      type: String,
      default: ''
    },
    des1: {
      type: String,
      default: ''
    },
    des2: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '250px'
    }
  }
}
</script>

<style lang="scss" scoped>

.theme {
    justify-content: center;
    box-sizing: border-box;
    height: 250px;
    .title {
        margin-bottom: 25px;
    }
    .des1, .des2 {
        line-height: 34px;
    }
}

</style>
